<template>
  <div class="scientific-list">
      <el-table :data="listData.list" style="width: 100%" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.4)" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border
      >
        <el-table-column label="名称" prop="name" min-width="220"/>
        <el-table-column label="类型" prop="category_name" width="140"/>
        <el-table-column label="区域" prop="area_name" width="100"/>
      </el-table>
    <el-pagination
        :current-page="listPram.page"
        :layout="'total, prev, pager, next, jumper'"
        :total="listData.count"
        @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import {scientificList} from "@/api/statistical1";

export default {
  name:'ScientificList',
  props:['id'],
  data(){
    return{
      listData: {list: [],count:0,},
      listPram: {
        page: 1,
        limit: 10,
      },
      loading:false,
    }
  },
  methods:{
    getTableList(){
      scientificList({...this.listPram,category:this.id}).then(res=>{
        this.listData=res;
      })
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.getTableList()
    },
  },
  mounted() {
    this.getTableList();
  }
}
</script>
<style lang="scss">
.scientific-list{
  .el-table{
    border: none;
    border-radius: 6px;
  }
  .el-pagination{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    .el-pagination__total{
      color: #fff;
    }
    .el-pagination__jump{
      color: #fff;
    }
    .btn-prev,.btn-next{
      background: none;
      i{
        color: #fff;
      }
    }
    .el-pagination__jump{
      input{
        background: none;
        color: #fff;
      }
    }
    .el-pager li.active{
      color: #409eff;
    }
    .el-pager{
      li{
        background: none;
        color: #fff;
      }
    }
  }
  .el-table__header{
    th{
      background: #1A2229 !important;
      border-color: #424242 !important;
      div{
        color: #fff;
      }
    }
  }
  .el-table--border::after, .el-table--group::after,.el-table::before{
    display: none;
  }
  .el-table__row{
    background: rgba(26, 34, 41, 0.9);
    td{
      border-color: #424242 !important;
      div{
        color: #fff;
      }
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
    background: none;
  }
  .el-table__row:hover{
    background: rgba(26, 34, 41, 0.9);
  }
}
</style>
